<!DOCTYPE html>
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    
    <title>heatmap.js OpenLayers Heatmap Layer</title>
    <style>
        body, html {
            margin:0;
            padding:0;
            font-family:Arial;
        }
        h1 {
            margin-bottom:10px;
        }
        #main {
            position:relative;
            width:1020px;
            padding:20px;
            margin:auto;
        }
        #heatmapArea {
            position:relative;
            float:left;
            width:800px;
            height:600px;
            border:1px dashed black;
        }
        #configArea {
            position:relative;
            float:left;
            width:200px;
            padding:15px;
            padding-top:0;
            padding-right:0;
        }
        .btn {
            margin-top:25px;
            padding:10px 20px 10px 20px;
            -moz-border-radius:15px;
            -o-border-radius:15px;
            -webkit-border-radius:15px;
            border-radius:15px;
            border:2px solid black;
            cursor:pointer;
            color:white;
            background-color:black;
        }
        #gen:hover{
            background-color:grey;
            color:black;
        }
        textarea{
            width:260px;
            padding:10px;
            height:200px;
        }
        h2{
            margin-top:0;
        }
    </style>
    <link rel="shortcut icon" type="image/png" href="http://www.patrick-wied.at/img/favicon.png" />
    </head>
    <body>
        <div id="main">
            <h1>OpenLayers Heatmap Renderer</h1>
            <a href="http://www.patrick-wied.at/static/heatmapjs/" title="heatmap.js">Back to the project page</a><br /><br />
            <div id="heatmapArea">
            </div>
            <div id="configArea">
                <h2>Sidenotes</h2>
                This is a demonstration of a canvas heatmap OpenLayers renderer<br /><br />
                Stressing the renderer can draw<br /><br />
                <strong>Note: this is an early release of the OpenLayers heatmap renderer. Please feel free to <a href="https://github.com/pa7/heatmap.js">contribute patches</a>. (e.g: display datapoints on dragend even when they weren't visible before)</strong>
                <div id="tog" class="btn">Toggle Draw tool</div>
            </div>
            <div style="position:absolute;width:940px;top:750px;text-align:center;"><a href="http://www.patrick-wied.at/static/heatmapjs/">heatmap.js</a> by <a href="http://www.patrick-wied.at" target="_blank">Patrick Wied</a></div>
        </div>
        <script src="http://openlayers.org/api/OpenLayers.js"></script>
        <script type="text/javascript" src="../../src/heatmap.js"></script>
        <script type="text/javascript" src="../../src/heatmap-openlayers-renderer.js"></script>
        <script type="text/javascript">
        var map, layer, heatmap, drawCtl;

        function init(){

            map = new OpenLayers.Map({
                div: 'heatmapArea',
                layers: [new OpenLayers.Layer.OSM()]
            });

            // create our vectorial layer using heatmap renderer
            heatmap = new OpenLayers.Layer.Vector("Heatmap Layer", {
                opacity: 0.3,
                renderers: ['Heatmap']
            });
            map.addLayer(heatmap);

            drawCtl = new OpenLayers.Control.DrawFeature(
                heatmap, OpenLayers.Handler.Point, {
                    autoActivate: true,
                    handlerOptions: {
                        layerOptions: {
                            // Uses standard renderers by draw tool
                            renderers: OpenLayers.Layer.Vector.prototype.renderers
                        }
                    }
                }
            );
            map.addControls([
                new OpenLayers.Control.LayerSwitcher(),
                drawCtl
            ]);

            map.zoomToMaxExtent();
            map.zoomIn();
        }

        window.onload = function() {
            init(); 
        };
        document.getElementById("tog").onclick = function(){
            heatmap.features.length &&  heatmap.drawFeature(heatmap.features[0]);
            if (drawCtl.active) {
                drawCtl.deactivate();
            } else {
                drawCtl.activate();
            }
        };

        </script>
    </body>
</html>
